<template>
  <div>
    <el-dialog
      title="Recharge"
      :visible.sync="dialogVisible"
      width="35%"
      :before-close="(done) => handleClose('dialogVisible', done)"
    >
      <div>
        <el-form
          ref="ruleForm"
          :rules="rules"
          :model="dialogForm"
          label-width="125px"
          class="demo-ruleForm"
        >
          <el-radio-group v-model="isCollapse" class="radio-btn">
            <el-radio-button :label="false">OnLine Recharge</el-radio-button>
            <el-radio-button
              :label="true"
              :disabled="listRecharge === 1"
            >OffLine Recharge</el-radio-button>
          </el-radio-group>
          <el-form-item
            v-if="isCollapse"
            prop="rechargeTime"
            label="Recharge Time"
          >
            <el-date-picker
              v-model="dialogForm.rechargeTime"
              type="datetime"
              placeholder="Recharge Time"
              @input="change($event)"
            />
          </el-form-item>
          <el-form-item
            v-if="isCollapse"
            prop="channelName"
            label="Channel Name"
          >
            <el-select
              v-model="dialogForm.channelName"
              clearable
              placeholder="Channel Name"
              @input="change($event)"
            >
              <el-option
                v-for="(item, index) in rechargeType"
                :key="index"
                :label="item.label"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item v-if="!isCollapse" prop="channel" label="Channel Name">
            <el-button
              class="btn-border"
              :class="{ active: selectPay === 1 }"
              @click="selectPayBtn(1)"
            ><img src="@/assets/imgs/paypal.png" alt="">
            </el-button>
            <!-- <el-button
              class="btn-border"
              :class="{ active: selectPay === 2 }"
              @click="selectPayBtn(2)"
            >
              <img src="@/assets/imgs/payoneer.png" alt="">
            </el-button> -->
          </el-form-item>
          <el-form-item prop="amount" label="Amount">
            <el-input
              v-model="dialogForm.amount"
              clearable
              placeholder="Amount"
              @mousewheel.native.prevent
              @input="change($event)"
            >
              <template slot="append">USD</template>
            </el-input>
          </el-form-item>
          <el-form-item prop="payer" label="Payer">
            <el-input
              v-model="dialogForm.payer"
              clearable
              placeholder="payer"
              @input="change($event)"
            />
          </el-form-item>
          <el-form-item
            v-if="isCollapse"
            style="width:307px;"
            prop="imageUri"
            label="Pay Image"
          >
            <upload-image
              :img-url="dialogForm.imageUri"
              @getImg="mainCoverImg"
            />
          </el-form-item>
          <el-form-item
            v-if="selectPay === 1 || isCollapse"
            prop="note"
            label="Note"
          >
            <el-input
              v-model="dialogForm.note"
              clearable
              maxlength="50"
              type="textarea"
              show-word-limit
              placeholder="Please enter note"
              @input="change($event)"
            />
          </el-form-item>
          <el-form-item v-if="selectPay === 2 && !isCollapse" prop="check">
            <el-checkbox-group v-model="check">
              <el-checkbox
                label="I authorize holosie to collect the above amount from my payoneer account"
                name="check"
              />
            </el-checkbox-group>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose('ruleForm')">Cancel</el-button>
        <el-button
          type="primary"
          :disabled="isDisClick"
          @click="submitRecharge('ruleForm')"
        >OK</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import UploadImage from '@/components/Upload/uploadImg';
import { checkNumPot } from '@/utils/validate';
import { offlineRecharge, paymentPaypal } from '@/api/finance';
export default {
  components: {
    UploadImage
  },
  props: {
    listRecharge: {
      type: Number,
      default: 0
    },
    id: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      dialogForm: {},
      dialogVisible: true,
      selectPay: 1,
      isDisClick: false,
      isCollapse: false,
      value1: '',
      check: [],
      rechargeType: [
        { label: 'Paypal', id: 'paypal' },
        { label: 'Payoneer', id: 'payoneer' }
      ],
      payUrl: '',
      rules: {
        rechargeTime: [
          { required: true, message: 'Please Choose Time', trigger: 'blur' }
        ],
        channelName: [
          {
            required: true,
            message: 'Please Choose Channel Name',
            trigger: 'change'
          }
        ],
        amount: [{ required: true, validator: checkNumPot, trigger: 'blur' }],
        payer: [
          { required: true, message: 'Please enter payer', trigger: 'blur' },
          {
            min: 1,
            max: 50,
            message: 'The character length is between 1 and 50',
            trigger: 'blur'
          }
        ],
        imageUri: [
          { required: true, message: 'Please Upload image', trigger: 'change' }
        ],
        note: [
          {
            min: 1,
            max: 50,
            message: 'The character length is between 1 and 50',
            trigger: 'blur'
          }
        ]
      }
    };
  },
  watch: {
    isCollapse() {
      if (this.$refs['ruleForm']) {
        this.$refs['ruleForm'].clearValidate();
      }
      this.dialogForm = {};
      this.$forceUpdate();
    }
  },
  mounted() {
    this.noteArea = this.note;
  },
  methods: {
    urlJump(url) {
      const aTag = document.createElement('a');
      aTag.href = url;
      aTag.target = '_blank';
      aTag.click();
    },
    submitRecharge(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (!this.isCollapse) {
            if (this.selectPay === 1) {
              this.dialogForm.channelName = 'paypal';
              this.dialogForm.billId = this.id;
              this.payUrl = paymentPaypal;
            }
          } else {
            this.payUrl = offlineRecharge;
          }
          this.isDisClick = true;
          const dataParams = JSON.parse(JSON.stringify(this.dialogForm));
          dataParams.amount = Math.round(dataParams.amount * 100);
          this.payUrl(dataParams).then((res) => {
            if (res.code === 200) {
              if (!this.isCollapse) {
                this.urlJump(res.data);
              } else {
                this.$message.success('Recharge Success');
              }
              if (this.$refs['ruleForm']) {
                this.$refs['ruleForm'].resetFields();
              }
              this.dialogInjectVisible = false;
            } else {
              this.isDisClick = false;
            }
          });
          this.$emit('close');
        }
      });
    },
    mainCoverImg(arr) {
      this.dialogForm.imageUri = arr[0];
      this.$refs['ruleForm'].clearValidate('imageUri');
      this.rules['imageUri'] = [];
    },
    selectPayBtn(val) {
      this.selectPay = val;
      this.$forceUpdate();
      if (this.$refs['ruleForm']) {
        this.$refs['ruleForm'].clearValidate();
      }
      this.dialogForm = {};
    },
    change(e) {
      this.$forceUpdate();
    },
    handleClose() {
      this.$emit('close');
    }
  }
};
</script>
<style lang="scss" scoped>
.active {
  background: #89d1f033;
}
.btn-border {
  padding: 10px 0 0 10px;
  border: 0;
}
.radio-btn {
  padding: 10px 0px 10px 20px;
  margin-bottom: 10px;
  width: 100%;
  background: #eeeeee;
}
</style>
